<template>
	<div>
		<p @click="isshow= true">click</p>
		<el-dialog title="编辑下游政策" :visible.sync="isshow" width="550px" :close-on-click-modal='false'>
			<div class="content">
				<el-form :model="json" :rules="rules" ref="json">
					<el-form-item label="添加对象类型:" :label-width="formLabelWidth" prop="extendType">
						<el-select class="inputs" v-model="json.extendType" size="mini" placeholder="请选择部门">
							<el-option v-for="item in objtypelist" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<!--<el-form-item label="添加对象:" :label-width="formLabelWidth" prop="">
				      <el-select class="inputs" v-model="json.region" size="mini" placeholder="请选择对象">
				        <el-option v-for="item in addobj" label="区域一" value="shanghai"></el-option>
				      </el-select>
				    </el-form-item>-->

					<el-form-item label="添加对象" :label-width="formLabelWidth" prop="targetId">
						<treeSelect v-if="json.extendType==1" :treeData="treeData" :treeProps="treeProps" v-model="json.targetId " :multiple="true" placeholder="请选择对象" @setSelectedId="setSelectedId">
						</treeSelect>

						<el-select v-else class="inputs" v-model="json.targetId" size="mini" placeholder="请选择对象">
							<el-option v-for="item in userlist" :label="item.userName" :value="item.id"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="保费类型:" :label-width="formLabelWidth" prop="premiumType">
						<el-select class="inputs" v-model="json.premiumType" size="mini" placeholder="请选择保费类型">
							<el-option v-for="item in premiumlist" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="返佣类型:" :label-width="formLabelWidth" prop="brokerageBusinessType">
						<el-select class="inputs" v-model="json.brokerageBusinessType" size="mini" placeholder="请选择返佣类型">
							<el-option v-for="item in Maidlist" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="是否扣点:" :label-width="formLabelWidth" prop="Points">
						<el-select class="inputs" v-model="json.Points" size="mini" placeholder="请选择是否扣点">
							<el-option v-for="item in Pointslist" :label="item.name" :value="item.value"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="交强险设置:" :label-width="formLabelWidth">
						<div class="numcontent" :class="indexs==1?'actives':''">
							佣金
							<el-input @blur="blurs1" class="numinp" v-model="json.lowerBrokerageTraffic" size="mini"></el-input>
							<span> {{json.brokerageBusinessType  | isPercentage}}</span> 奖励
							<el-input @blur="blurs2" class="numinp" v-model="json.lowerRewardTraffic" size="mini"></el-input>
							<span> {{json.brokerageBusinessType  | isPercentage}}</span>
						</div>
					</el-form-item>

					<el-form-item label="商业险设置:" :label-width="formLabelWidth">
						<div class="numcontent" :class="indexs==2?'actives':''">
							佣金
							<el-input @blur="blurs3" class="numinp" v-model="json.lowerBrokerageBusiness" size="mini"></el-input>
							<span> {{json.brokerageBusinessType  | isPercentage}}</span> 奖励
							<el-input @blur="blurs4" class="numinp" v-model="json.lowerRewardBusiness" size="mini"></el-input>
							<span> {{json.brokerageBusinessType  | isPercentage}}</span>
						</div>
					</el-form-item>

					<el-form-item label="车船税设置:" :label-width="formLabelWidth" prop="">
						<div class="numcontent">
							佣金
							<el-input @blur="blurs5" class="numinp" v-model="json.lowerBrokerageVehicleTax" size="mini"></el-input>
							<span> {{json.brokerageBusinessType  | isPercentage}}</span>
						</div>
					</el-form-item>

					<el-form-item label="备注信息:" :label-width="formLabelWidth">
						<el-input class="inputs" type="textarea" :rows="2" placeholder="请填写备注信息" v-model="json.textareas">
						</el-input>
					</el-form-item>
					<el-form-item class="btn">
						<el-button type="primary" @click.stop="submits('json')">确 定</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Vue from 'vue'
	import treeSelect from "@/components/tree-select/tree.vue";
	export default {
		data() {
			return {
				isshow: false,
				formLabelWidth: '120px',
				objtypelist: [ //对象列表
					//					{name:"政策",value:"0"},
					{
						name: "组织",
						value: "1"
					},
					{
						name: "用户",
						value: "2"
					}
				],
				premiumlist: [ //保费列表
					{
						name: "按净保费",
						value: "1"
					},
					{
						name: "按全保费",
						value: "0"
					}
				],
				Maidlist: [ //保费列表
					{
						name: "百分比",
						value: "0"
					},
					{
						name: "人名币",
						value: "1"
					}
				],
				Pointslist: [ //扣点
					{
						name: "是",
						value: "1"
					},
					{
						name: "否",
						value: "0"
					}
				],
				addobj: [ //添加对象列表

				],
				rules: {
					extendType: [{
						required: true,
						message: '请选择对象类型',
						trigger: 'change'
					}],
					targetId : [{
						required: true,
						message: '请选择对象',
						trigger: 'change'
					}],
					premiumType: [{
						required: true,
						message: '请选择保费类型',
						trigger: 'change'
					}],
					brokerageBusinessType : [{
						required: true,
						message: '请选择返佣类型',
						trigger: 'change'
					}],
					Points: [{
						required: true,
						message: '请选择是否扣点',
						trigger: 'change'
					}]

				},
				json: {
					policyItemId :"", //政策id
					extendType: "", //对象类型,
					targetId : null, //对象
					premiumType: "", //保费类型
					brokerageBusinessType : "", //返佣类型
					//Points:"", //是否扣点
					lowerBrokerageTraffic: "0", //交强-佣金
					lowerRewardTraffic: "0", //较强——奖励
					lowerBrokerageBusiness: "0", //商业-佣金
					lowerRewardBusiness: "0", //商业——奖励
					lowerBrokerageVehicleTax: "0", //下游车船税佣金比例
					textareas: "" //备注

				},
				userlist: [],
				indexs: null,
				treeData: [], //树数据
				treeProps: {
					label: "displayName",
					children: "orgs",
					level: "depth",
					value: 'id'
				}, //树属性
			}
		},
		filters: {
			isPercentage(val) {
				if(val == 0) {
					return "%"
				} else {
					return "元"
				}
			}
		},
		mounted() {
			this.getUnits()
			this.getuesr()
		},
		methods: {
			//用户信息
			getuesr() {
				let params = {};
				this.post(params, "services/app/common/GetUsers").then(
					rs => {
						console.log(rs);
						if(rs.success) {
							console.log('success')
							console.log(rs)
							this.userlist = rs.result.users
						}
					}
				);
			},
			//组织机构
			getUnits() {
				let params = {};
				this.post(params, "services/app/common/GetCurrentOrganizationUnits").then(
					rs => {
						console.log(rs);
						if(rs.success) {
							let data = rs.result;
							let arr = [];
							arr.push(data);
							this.treeData = arr;
							// console.log(rs.result);
							// console.log(this.treeData);
							// console.log('-----------');
						}
					}
				);
			},
			//tree
			setSelectedId(val) {
				console.log(val);
				this.json.targetId  = val;
			},
			blurs1(val) {
				let aa = this.clearNoNum(val.target.value)
				Vue.set(this.json, "lowerBrokerageTraffic", aa)
			},
			blurs2(val) {
				let aa = this.clearNoNum(val.target.value)
				Vue.set(this.json, "lowerRewardTraffic", aa)
			},
			blurs3(val) {
				let aa = this.clearNoNum(val.target.value)
				Vue.set(this.json, "lowerBrokerageBusiness", aa)
			},
			blurs4(val) {
				let aa = this.clearNoNum(val.target.value)
				Vue.set(this.json, "lowerRewardBusiness", aa)
			},
			blurs5(val) {
				let aa = this.clearNoNum(val.target.value)
				Vue.set(this.json, "lowerBrokerageVehicleTax", aa)
			},
			clearNoNum(obj) {
				obj = obj.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				obj = obj.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				obj = obj.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				obj = obj.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); //只能输入两个小数
				if(obj.indexOf(".") < 0 && obj != "") {
					//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					obj = parseFloat(obj);
				}
				if(obj >= 100) {
					obj = 100
				}
				if(obj == "") {
					obj = 0
				}
				console.log(obj)
				return obj

			},
			submits(formName) {
				let a1 = parseFloat(this.json.lowerBrokerageTraffic)
				let a2 = parseFloat(this.json.lowerRewardTraffic)
				let b1 = parseFloat(this.json.lowerBrokerageBusiness)
				let b2 = parseFloat(this.json.lowerRewardBusiness)
				this.$refs[formName].validate((valid) => {
					if(valid) {
						if(a1 + a2 > 100 || b1 + b1 > 100) {
							if(a1 + a2 > 100) {
								this.indexs = 1
							} else {
								this.indexs = 2
							}

						} else {
							this.indexs = null
							console.log(this.json)
					      	this.post(this.json, "services/app/policy/PolicyAddExtendInfo").then(rs => {
						        console.log(rs)
						      });
							//this.isshow=false
						}

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		components: {
			treeSelect
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		font-size: 12px;
	}
	
	.inputs {
		width: 250px;
		font-size: 12px;
	}
	
	.numinp {
		width: 60px;
		margin-left: 5px;
	}
	
	.numcontent {}
	
	.btn {
		display: flex;
		justify-content: center;
	}
	
	.actives .numinp {
		border: 1px solid #f56c6c;
	}
	/*#f56c6c*/
	
	.rh {
		float: right;
		height: 28px;
		span {
			display: inline-block;
			width: 80px;
		}
		selectone {
			display: inline-block;
		}
		.util-select {
			width: 190px;
		}
	}
</style>